<template>
  <div class="auth-container">
    <transition name="fade">
<!--      <Login v-if="activeTab === 'login'" />-->
<!--      <Regist v-else-if="activeTab === 'register'" />-->
<!--      <ResetPassword v-else />-->
      <!-- 使用动态组件 -->
      <component :is="activeComponent" />
    </transition>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useLoginStore } from '../Store/modules/userinfo/LoginTZ';
import Login from '../Views/Login/LoginView.vue';
import Regist from '../Views/Login/RegistView.vue';
import ResetPassword from '../Views/Login/ResetPasswordView.vue';
import {computed} from "vue";

const loginStore = useLoginStore();
const { activeTab } = storeToRefs(loginStore);

const activeComponent = computed(() => {
  switch(activeTab.value) {
    case 'login': return Login
    case 'register': return Regist
    default: return ResetPassword
  }
})

// console.log('当前activeTab:', loginStore.activeTab) // 切换时观察值是否变化
// // 在子组件中也打印验证
// console.log('子组件接收到的activeTab:', activeTab.value)

</script>

<style scoped>
*{
  vertical-align: top;
}

.auth-container {
  width: 100%;
  height: 100vh;
  /*background-color: #1a1a1a;*/
  background-image: url("/src/Assets/img/login_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

transition {
  z-index: 9999;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.5s ease;
}


</style>
